<template>
  <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }},{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改C1</button>
    <button @click="changeC2">修改C2</button>
    <button @click="changeCar">修改车</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";
let person = reactive({
  name: "张三",
  age: 18,
  car: {
    c1: "奔驰",
    c2: "宝马",
  },
});

function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age++;
}
function changeC1() {
  person.car.c1 = "奥迪";
}
function changeC2() {
  person.car.c2 = "小刀";
}
function changeCar() {
  person.car = { c1: "dd", c2: "00" };
}
//只想监视名字 getter函数->能返回一个值的函数
//该属性是基本类型
//更推荐写函数  不管该属性是基本类型还是对象类型
watch(
  () => person.name,
  (newValue, oldValue) => {
    console.log("person.name变化了", newValue, oldValue);
  }
);
//deep:true可以监视小的修改  不加只能监视大的修改
watch(
  () => person.car,
  (newValue, oldValue) => {
    console.log("person.car变化了", newValue, oldValue);
  },
  { deep: true }
);
</script>
